@font-face {
    font-family: 'Fredoka';
    src: url('/static/fonts/Fredoka-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: normal;
    /* 正常粗细 */
    font-style: normal;
    /* 正常样式 */
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Fredoka', "Microsoft Yahei", sans-serif !important;
}

body {
    background-color: black;
}

/* 这里是加载动画 */
/* 样式设置，确保GIF在页面加载时不可见，并且加载动画在页面中心 */
#gif1,
#gif2 {
    display: none;
    /* 默认不显示GIF */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 350px;
    /* 将 GIF 宽度固定为 300 像素 */
}

#loading-animation {
    display: block;
    /* 默认显示加载动画 */
    flex-direction: column;
    /* 垂直排列子元素 */
    align-items: center;
    /* 子元素水平居中 */
    justify-content: center;
    /* 子元素垂直居中 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    text-align: center;
    line-height: 100vh;
    /* 使文本垂直居中 */
    z-index: 1000;
}

#loading-animation img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 鼠标跟随部分 */
.mouse {
    width: 100px;
    height: 100px;
    position: absolute;
    background-image: url('https://static.igem.wiki/teams/5409/home/mouse/kelp2.gif');
    background-size: cover;
    z-index: 11;
    /* 确保鼠标动画在最上层 */
}

/* 其它部分 */
.allhomebody {
    background-color: rgb(0, 0, 0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: black;
}

.homecontainer {
    width: 100%;
    /* max-width: 100%; */
    height: 100vh;
    overflow: hidden;
    background-color: black;
    /* 将背景设置为黑色 */
    background-attachment: fixed;
}

#scene {
    margin: 0;
    padding: 0;
    width: 100%;
    /* 确保 ul 的宽度与容器一致 */
    height: 100%;
    position: relative;
    list-style: none;
}

.layer {
    position: absolute;
    /* 保持绝对定位 */
    width: 100%;
    /* 设置层的宽度与父容器一致 */
    height: 100%;
    /* 设置层的高度与父容器一致 */
    top: 0;
    left: 0;
}

.layer img {
    width: 100%;
    /* 让图片宽度与父级一致 */
    height: 100%;
    /* 让图片高度与父级一致 */
    object-fit: cover;
    /* 保持图片比例，填充整个父级容器 */
    display: block;
}

/* 这里是新加入的元素 */
.image span {
    letter-spacing: 3px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 300px;
    text-align: center;
    color: rgba(255, 255, 255, .9);
    z-index: 999;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
    font: 500 140px '优设标题黑';
}

p,
img {
    pointer-events: none;
    user-select: none;
}

div {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}

.emptybox1 {
    z-index: 12;
    margin-top: 10rem;
    /* 调整顶部外边距，增加与上方容器的距离 */
    width: 65rem;
    height: 35rem;
    background-size: 100%;
    background-image: url('https://static.igem.wiki/teams/5409/home/home-shu/1.gif');
    border-radius: 5rem;
    margin-bottom: 3rem;
    /* 为容器和文字之间预留一些空间 */
    background-repeat: no-repeat;
    color: white;
    /* text-transform: uppercase;这个是把字母转换成大写 */
    position: relative;
    /* 伪元素定位基于这个容器 */
}

.emptybox2 {
    z-index: 12;
    width: 65rem;
    height: 35rem;
    background-size: 100%;
    background-image: url('https://static.igem.wiki/teams/5409/home/home-shu/22.png');
    border-radius: 5rem;
    margin-bottom: 3rem;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    /* 伪元素定位基于这个容器 */
}

.emptybox3 {
    z-index: 12;
    width: 65rem;
    height: 35rem;
    background-size: 100%;
    background-image: url('https://static.igem.wiki/teams/5409/home/home-shu/33.gif');
    border-radius: 5rem;
    margin-bottom: 3rem;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    /* 伪元素定位基于这个容器 */
}

.emptybox4 {
    z-index: 12;
    width: 65rem;
    height: 35rem;
    background-size: 100%;
    background-image: url('https://static.igem.wiki/teams/5409/home/home-shu/44.png');
    border-radius: 5rem;
    margin-bottom: 3rem;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    /* 伪元素定位基于这个容器 */
}

.emptybox5 {
    z-index: 12;
    width: 65rem;
    height: 35rem;
    background-size: 100%;
    background-image: url('https://static.igem.wiki/teams/5409/home/home-shu/5.png');
    border-radius: 5rem;
    margin-bottom: 3rem;
    background-repeat: no-repeat;
    color: white;
    position: relative;
    /* 伪元素定位基于这个容器 */
}

.box-text {
    width: 65rem;
    font-weight: 900;
    font-family: 'Fredoka', "Microsoft Yahei", sans-serif;
    font-size: 1.5rem;
    /* 初始字体大小 */
    color: white;
    text-align: center;
    /* 让文字居中显示 */
    margin-bottom: 4rem;
    /* 下方文字的下边距 */
    transition: transform 0.3s ease-in-out;
    /* 添加过渡效果 */
}

/* Hover 时放大文字 */
.emptybox1:hover+.box-text,
.emptybox2:hover+.box-text,
.emptybox3:hover+.box-text,
.emptybox4:hover+.box-text,
.emptybox5:hover+.box-text {
    transform: scale(1.2);
    /* hover 时放大 20% */
}

.scrollbox {
    justify-content: start;
    align-items: start;
    width: 100%;
    overflow: hidden;
}

.scrollbox_container {
    z-index: 12;
    position: relative;
    /* 这里有测试 */
    justify-content: start;
    height: 100vh;
    flex-shrink: 0;
}

.scrollbox_container_card {
    position: relative;
    width: 65rem;
    height: 40rem;
    background-color: white;
    border-radius: 5rem;
    margin-left: 5rem;
    flex-shrink: 0;
    overflow: hidden;
}

.scrollbox_container_card p {
    font-family: 'Fredoka', "Microsoft Yahei", sans-serif;
    font-size: 2rem;
    color: #171717;
    font-weight: 900;
    z-index: 1;
    position: absolute;
    /* 使用绝对定位调整文字的垂直位置 */
    top: 90%;
    /* 让文字位于容器的正中上下 */
    transform: translateY(-50%);
    /* 调整到垂直居中 */
}

.scrollbox_container_card p i {
    font-family: 'Fredoka', "Microsoft Yahei", sans-serif;
    font-size: 2.3rem;
    color: #171717;
    font-weight: 900;
    z-index: 1;
    transform: translateY(-50%);
    font-style: italic;
    /* 保持斜体 */
}

.scc_city {
    position: absolute;
    bottom: 0;
    height: 100%;
    opacity: 0.7;
}

.scc_truck {
    position: absolute;
    bottom: 100px;
    height: 12rem;
}

.scc_city1,
.scc_truck1 {
    left: 0;
}

.scc_city2 {
    left: calc(-50% + -5rem);

}

.scc_city3 {
    left: calc(-100% + -10rem);
}

.scc_city4 {
    left: calc(-100% + -15rem);
}

.scc_truck2 {
    left: calc(-100% + -5rem);
}

.scc_truck3 {
    left: calc(-200% + -10rem);
}

.scc_truck4 {
    left: calc(-300% + -15rem);

}